<script setup lang="ts">
  import { getorgList, delectOrg } from '@/api/syssetting';
  import { ref } from 'vue';
  import { TableInstance, Message } from '@arco-design/web-vue';
  import Edit from './edit/index.vue';
  import Add from './add/index.vue';
  import {
    getindustry,
    getpolicy_direction,
    getpolicyIndex,
  } from '@/api/dataCenter';
  defineOptions({
    name: 'companyList',
  });
  const proTableRef = ref<TableInstance | null>(null);
  // 表单类型
  const formType = ref([
    {
      name: 'org_name',
      label: '机构名称',
      type: 'a-input',
      fieldProps: {
        span: 8,
      },
    },
    {
      name: 'org_code',
      label: '机构代码',
      type: 'a-input-number',
      fieldProps: {
        span: 8,
      },
    },
  ]);
  const isEdit = ref(false);
  const visible1 = ref(false);
  const editParam = ref();
  const tableType = [
    { dataIndex: 'org_id', slotName: 'id' },
    {
      title: '机构名称',
      dataIndex: 'org_name',
    },
    {
      title: '机构代码',
      dataIndex: 'org_code',
    },
    {
      title: '联系电话',
      dataIndex: 'org_contact',
    },
    {
      title: '联系地址',
      dataIndex: 'org_address',
    },
    {
      title: '官方网址',
      dataIndex: 'org_website',
    },
    {
      title: '电子邮箱',
      dataIndex: 'org_email',
    },
    {
      title: '邮政编码',
      dataIndex: 'org_postal_code',
    },
    {
      title: '开户银行',
      dataIndex: 'org_account_bank',
    },
    {
      title: '银行账户',
      dataIndex: 'org_account_num',
    },
    {
      title: '操作',
      width: 130,
      fixed: 'right',
      slotName: 'operations',
      menus: [
        {
          name: '编辑',
          onClick: (record: any) => {
            visible1.value = true;
            editParam.value = record.org_id;
          },
        },
        {
          name: '删除',
          onClick: (record: any) => {
            delectOrg({
              org_ids: [record.org_id],
            }).then((res) => {
              proTableRef.value?.setRefresh();
              Message.success('删除成功！');
            });
          },
        },
      ],
    },
  ];
  const visible = ref(false);
  async function request(params) {
    const res = await getorgList(params);
    return {
      data: res.data,
    };
  }
  const industryAll = ref();
  const directionAll = ref();
  onMounted(() => {
    // 获取政策行业和政策方向
    Promise.all([
      getindustry({ page_size: 10000 }),
      getpolicy_direction({ page_size: 10000 }),
    ]).then(([industryRes, policyRes]) => {
      industryAll.value = industryRes.data.list;
      directionAll.value = policyRes.data.list;
    });
  });
</script>

<template>
  <div class="container">
    <pro-table
      ref="proTableRef"
      :formType="formType"
      title="机构列表"
      :request="request"
      :tableType="tableType"
    >
      <template #btns>
        <a-button
          type="primary"
          @click="
            () => {
              isEdit = false;
              visible = true;
            }
          "
        >
          <template #icon>
            <icon-plus />
          </template>
          添加机构
        </a-button>
      </template>
      <template #options>
        <add
          v-if="visible"
          v-model:visible="visible"
          :industryAll="industryAll"
          :directionAll="directionAll"
          @refresh="
            () => {
              $refs.proTableRef.setRefresh();
            }
          "
        />
        <edit
          v-if="visible1"
          v-model:visible="visible1"
          :editParam="editParam"
          :industryAll="industryAll"
          :directionAll="directionAll"
          @refresh="
            () => {
              $refs.proTableRef.setRefresh();
            }
          "
        />
      </template>
    </pro-table>
  </div>
</template>

<style scoped lang="less"></style>
